<template>
  <div>
    <CanvasBgComp :index="7"></CanvasBgComp>
    <div class="user">
      <UserInfoComp></UserInfoComp>
    </div>
    <div class="main">
      <div>
        <div class="menus">
          <div v-for="d in mainmenu">
            <div @click="openlink(d.link)">
              <img :src="d.icon" alt="" />
              <div>{{ d.title }}</div>
            </div>
          </div>
          <div v-for="d in more">
            <div @click="openlink(d.link)">
              <img :src="d.icon" alt="" />
              <div>{{ d.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import CanvasBgComp from '../components/CanvasBgComp.vue'
import UserInfoComp from '../components/UserInfoComp.vue'

import { storeToRefs } from 'pinia'
import store from '../store/index'
const { islogin, usermenu, mainmenu, moremenu } = storeToRefs(store())

const router = useRouter()

const more = computed(() => {
  if (islogin.value) {
    return usermenu.value
  } else {
    return moremenu.value
  }
})

const openlink = (link: string) => {
  if (!link) {
    return
  }
  const url = router.resolve(link).fullPath
  // window.open(url)
  location.href = url
}
</script>
<style lang="scss" scoped>
.bg {
  color: #fff;
}
.main {
  width: 100vw;
  padding-top: 5vh;
  > div {
    height: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    font-size: 1.2rem;
  }
}
.user {
  width: 100vw;
  position: fixed;
  top: 0rem;
  right: 0rem;
  z-index: 2;
}

.menus {
  width: 75vw;
  margin: 1rem auto;
  display: grid;
  column-gap: 5vw;
  row-gap: 10vh;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  img {
    margin: 1rem;
    display: block;
    width: 80%;
    height: auto;
    transition: all 0.5s;
  }
  > div {
    // margin: 1rem;
    &:hover {
      cursor: pointer;
      img {
        transform: scale(1.1);
      }
    }
  }
}
</style>
